<template>
  <div class="materals">
    <div v-if="components_config.length > 0">
      <template v-for="itctItem in INDENTIFICATION_OPTION">
        <template
          v-if="
            components_config.filter((v) => v.sign === itctItem.value).length >
            0
          "
        >
          <h3 class="title">{{ itctItem.label }}</h3>
          <ul class="flex flex-wrap" :key="itctItem.value">
            <li
              v-for="(item, index) in components_config.filter(
                (v) => v.sign === itctItem.value
              )"
              :key="index"
              class="item"
              :data-component="item.type"
              draggable
              @dragstart="onDragStart(item.type)"
              @dragend="onDragEnd(item.type)"
            >
              <image :src="item.icon" style="width: 29px; height: 29px" />
              <span class="name">{{ item.name }}</span>
            </li>
          </ul>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import { CONFIG, COMS_JSON } from "@/components/materals/index";
import { INDENTIFICATION, INDENTIFICATION_TEXT } from "@/const/widget";
export default {
  name: "index",
  components: {},
  data() {
    return {
      COMS_JSON,
      INDENTIFICATION_TEXT,
      INDENTIFICATION,
      addParams: {},
      INDENTIFICATION_OPTION: [
        {
          label: INDENTIFICATION_TEXT.BASIC,
          value: INDENTIFICATION.BASIC,
        },
        {
          label: INDENTIFICATION_TEXT.CUS_FORM,
          value: INDENTIFICATION.CUS_FORM,
        },
        {
          label: INDENTIFICATION_TEXT.BUSINESS,
          value: INDENTIFICATION.BUSINESS,
        },
        {
          label: INDENTIFICATION_TEXT.OTHER,
          value: INDENTIFICATION.OTHER,
        },
        {
          label: INDENTIFICATION_TEXT.ONLY,
          value: INDENTIFICATION.ONLY,
        },
      ],
      isHasOnly: false,
    };
  },
  computed: {
    query() {
      return this.$route.query;
    },
    components() {
      return this.$store.state.page.page.items;
    },
    addActiveComponentIndex() {
      return this.$store.state.page.addActiveComponentIndex;
    },
    components_config({ query }) {
      //微页面
      if (
        query.hasOwnProperty("sign") &&
        (query.sign === INDENTIFICATION.PAGE_MODAL ||
          query.sign === INDENTIFICATION.PAGE_FORM_MODAL)
      ) {
        return [
          ...CONFIG.filter((v) => v.sign === INDENTIFICATION.BUSINESS),
          ...CONFIG.filter((v) => v.sign === INDENTIFICATION.BASIC),
          ...CONFIG.filter((v) => v.sign === INDENTIFICATION.OTHER),
        ].filter((v) => v.isShow);
      }
      if (
        query.hasOwnProperty("sign") &&
        (query.sign === INDENTIFICATION.USER_CENTER_MODAL ||
          query.sign === INDENTIFICATION.USER_CENTER_MODAL)
      ) {
        return [
          ...CONFIG.filter((v) => v.sign === INDENTIFICATION.BUSINESS),
          ...CONFIG.filter((v) => v.sign === INDENTIFICATION.BASIC),
          ...CONFIG.filter((v) => v.sign === INDENTIFICATION.OTHER),
        ].filter((v) => v.isShow);
      }
      //表单模块
      if (
        query.hasOwnProperty("sign") &&
        query.sign === INDENTIFICATION.FORM_MODAL
      ) {
        return [
          ...CONFIG.filter((v) => v.sign === INDENTIFICATION.CUS_FORM),
          // ...CONFIG.filter((v) => v.sign === INDENTIFICATION.BASIC),
          ...CONFIG.filter((v) => v.sign === INDENTIFICATION.ONLY),
        ].filter((v) => v.isShow);
      }
      //装修模块
      if (
        query.hasOwnProperty("sign") &&
        query.sign === INDENTIFICATION.DESC_MODAL
      ) {
        return [
          ...CONFIG.filter((v) => v.sign === INDENTIFICATION.BUSINESS),
          ...CONFIG.filter((v) => v.sign === INDENTIFICATION.BASIC),
        ].filter((v) => v.isShow);
      }
      return [];
    },
  },
  mounted() {
    console.log("CONFIG", CONFIG);
  },
  methods: {
    onDragStart(e) {
      //匹配到组件的json
      for (const jsonKey in this.COMS_JSON) {
        const json = this.COMS_JSON[jsonKey];
        if (json.type === e) {
          const component = JSON.parse(JSON.stringify(json));
          component.id = Date.now();
          component.data_id = "";
          //只能添加一个表单模块
          if (component.isOnly) {
            const isHasOnly =
              this.components.filter((v) => v.type === component.type).length >
              0;
            if (isHasOnly) {
              this.isHasOnly = true;
            }
          }
          console.log("匹配到组件的json", component, component.id);
          const params = {
            type: "add",
            json: component,
          };
          this.addParams = component;
          //设置活动的组件
          this.$store.dispatch("page/setPageComponentJSON", params);
        }
      }
    },
    onDragEnd() {
      console.log("要添加的组件", this.addParams);
      const { isModule } = this.addParams;
      if (this.addActiveComponentIndex === -1) {
        const addIndex = this.components.length;
        this.$store.dispatch("page/setAddPageComponentIndex", addIndex);
      }
      if (this.isHasOnly) {
        return this.$showMessage({
          op: "message",
          type: "error",
          content: `此${isModule ? "模块" : "组件"}只允许添加一个`,
        }).then(() => {
          this.isHasOnly = false;
          this.resetParams();
        });
        // return uni.showModal({
        //   title: "提示",
        //   content: `此${isModule ? "模块" : "组件"}只能添加一次`,
        //   showCancel: false,
        //   success: (res) => {
        //     if (res.confirm) {
        //       this.isHasOnly = false;
        //       this.resetParams();
        //     }
        //   },
        // });
      }
      this.$store.dispatch("page/setAddPageComponent").then(() => {
        this.$store.dispatch(
          "page/setEditConfigComActiveId",
          this.addParams?.id
        );
        this.$nextTick(() => {
          this.isHasOnly = false;
          this.resetParams();
        });
      });
      console.log("dragEnd");
    },
    resetParams() {
      this.addParams = {};
      this.$store.dispatch("page/setPageComponentJSON", {});
      this.$store.dispatch("page/setAddPageComponentIndex", -1);
    },
  },
};
</script>

<style scoped lang="scss">
.materals {
  ul {
    list-style: none;
    padding: 0;
  }
  .title {
    //text-align: center;
    //padding-left: 14.5px;
    margin-top: 10px;
  }
  .item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 70px; /*no*/
    margin-top: 18px;
    margin-right: auto;
    padding: 10px 0; /*no*/
    font-size: 12px; /*no*/
    color: #666;
    border-radius: 4px;
    &:hover {
      color: #fff;
      background: $color-theme;
    }
    .name {
      padding-top: 9px;
      font-size: 14px;
    }
  }
}
</style>
